
<script setup>
// import Button from 'primevue/button'
// import Galleria from 'primevue/galleria';
import { ref ,onMounted } from "vue";
import ApiHome from '../../api/home';

const test=ref(2);
const categoryData=ref([]);
const categorySubData=ref([]);
const categoryList=ref([]);
const getCategories = async () => {
  try {
    const response = await ApiHome.getCategory();
    console.log(response,'response')
    categoryData.value = response.data; // 假设数据在 response.data 中
  } catch (error) {
    console.error('Error fetching categories:', error);
  }
};
const getCategorysub = async (id) => {  
  try {
    const response = await ApiHome.getCategorysub(id);
    categorySubData.value = response.data; // 假设数据在 response.data 中
    console.log(response,'response')                                                                                                                                                                                                                                                                                                                                                                                       
  } catch (error) {
    console.error('Error fetching categories:', error);
  }  
};
const getcollectList= async(params)=>{
  try{
    const response = await ApiHome.getcollectList(params);
    categoryList.value = response.data; // 假设数据在 response.data 中
    console.log(response,'response')

  }catch(error){
    console.error('Error fetching categories:', error);
  }
};
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
];
const searchValue=ref();
const chanceSub=async(params)=>{
   await getCategorysub(params);
}
const tosearch=()=>{
   console.log(searchValue.value)
}
const chanceData=()=>{
  console.log('this is chance method , need chance data use it')
  console.log('this is count count method')
  console.log(tempData,'tempData')
}
const tempData=ref();

// const images = ref([
//   {
//     itemImageSrc:'https://www.baisihair.fr/cdn/shop/files/5_86e3c3b7-f11d-4712-8a98-f14dd1943231.png?v=1726239476&width=540',
//     alt:'222',
//     thumbnailImageSrc:'https://www.baisihair.fr/cdn/shop/files/5_86e3c3b7-f11d-4712-8a98-f14dd1943231.png?v=1726239476&width=540'
     
//   },
//   {
//     itemImageSrc:'https://cdn.shopify.com/s/files/1/0353/7810/2316/files/7_9a3fa667-3ef8-4327-a5ba-495e0d1b69dc.jpg?v=1722395076',
//     alt:'222',
//     thumbnailImageSrc:'https://cdn.shopify.com/s/files/1/0353/7810/2316/files/7_9a3fa667-3ef8-4327-a5ba-495e0d1b69dc.jpg?v=1722395076'
     
//   },
//   {
//     itemImageSrc:'https://www.baisihair.fr/cdn/shop/files/5_86e3c3b7-f11d-4712-8a98-f14dd1943231.png?v=1726239476&width=540',
//     alt:'222',
//     thumbnailImageSrc:'https://www.baisihair.fr/cdn/shop/files/5_86e3c3b7-f11d-4712-8a98-f14dd1943231.png?v=1726239476&width=540'
     
//   },
//   {
//     itemImageSrc:'https://cdn.shopify.com/s/files/1/0353/7810/2316/files/7_9a3fa667-3ef8-4327-a5ba-495e0d1b69dc.jpg?v=1722395076',
//     alt:'222',
//     thumbnailImageSrc:'https://cdn.shopify.com/s/files/1/0353/7810/2316/files/7_9a3fa667-3ef8-4327-a5ba-495e0d1b69dc.jpg?v=1722395076'
     
//   },
//   {
//     itemImageSrc:'https://www.baisihair.fr/cdn/shop/files/5_86e3c3b7-f11d-4712-8a98-f14dd1943231.png?v=1726239476&width=540',
//     alt:'222',
//     thumbnailImageSrc:'https://www.baisihair.fr/cdn/shop/files/5_86e3c3b7-f11d-4712-8a98-f14dd1943231.png?v=1726239476&width=540'
     
//   },
//   {
//     itemImageSrc:'https://cdn.shopify.com/s/files/1/0353/7810/2316/files/7_9a3fa667-3ef8-4327-a5ba-495e0d1b69dc.jpg?v=1722395076',
//     alt:'222',
//     thumbnailImageSrc:'https://cdn.shopify.com/s/files/1/0353/7810/2316/files/7_9a3fa667-3ef8-4327-a5ba-495e0d1b69dc.jpg?v=1722395076'
     
//   }
// ]);
// const responsiveOptions = ref([
//     {
//         breakpoint: '1300px',
//         numVisible: 1
//     },
//     {
//         breakpoint: '575px',
//         numVisible: 2
//     },
//     {
//         breakpoint: '1300px',
//         numVisible: 3
//     },
//     {
//         breakpoint: '575px',
//         numVisible: 4
//     },
//     {
//         breakpoint: '1300px',
//         numVisible: 5
//     },
//     {
//         breakpoint: '575px',
//         numVisible: 6
//     }
// ]);

onMounted(async () => {
  await getCategories();//获取一级分类
   await getCategorysub(1);//获取二级分类
   const parmas={
    category_id:1,
    subcategory_id:1
   }
   await getcollectList(parmas)
});


</script>


<template>
  <div>
     <div>table</div>
     <div class="home-r">
        <div class="r-head">
            headtitle
        </div>
        <div class="r-content">
          <div class="content-haed">
            <div class="home-search" @click="tosearch">
             <input type="text" v-model="searchValue" >
          </div>
          <div class="search-Btn">Search</div>     
          </div>
          <div class="datatable">
              <div class="dataitem" v-for="item in categoryData" :key="item.category_id" @click="chanceSub(item.category_id)" >
                {{ item.category_id }}{{ item.name }}
              </div>
              <div class="dataSubitem" v-for="item in categorySubData" :key="item.categorySub_id" @click="getSubData(item.name)">
                {{ item.categorySub_id }}{{ item.name }}   <div class="addBtn">add</div>
              </div>
              <div class="list-item">
                 <div></div>
              </div>

          </div>
          <div class="listData">
                 <div class="listItem" v-for="item in categoryList " :key="item" >
                    {{ item.name }}{{ item.price }}
                    <div class="deleteBtn">delet22e</div>
                    <div class="updateBtn">update</div>
                 </div>
                 <div class="addBtn">add</div>
                 <div class="chanceBtn" @click="chanceData()">chance</div>
                
          </div>
         
          <el-table :data="tableData" style="width: 100%">
               <el-table-column prop="date" label="Date" width="180" />
               <el-table-column prop="name" label="Name" width="180" /> 
               <el-table-column prop="address" label="Address" />
          </el-table>
        </div>
        <div class="r-foot">
           foot
           {{ test }}
           分页功能
        </div>
     </div>

     <!-- <Button label="Profile" icon="pi pi-user" class="p-button" />
     <Button label="Warn" severity="warn" /> -->
     <!-- <div class="card">
        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 640px">
            <template #item="slotProps">
                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
            </template>
            <template #thumbnail="slotProps">
                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt"  style="width: 100px; height: 100px;"/>
            </template>
        </Galleria>
    </div> -->
  </div>
</template>
<style>
.p-button{
  background-color: rgb(73, 226, 43);
}
.content-haed {
    display: flex;
    justify-content: space-between;
}
.dataitem{
  width: 100px;
  height: 50px;
  padding: 20px;
  background-color: cadetblue;
}
.addBtn{
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  background-color: cadetblue;
  font-size: 14px;
}
.updateBtn{
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  background-color: cadetblue;
  font-size: 14px;
}
.deleteBtn{
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  background-color: cadetblue;
  font-size: 14px;
}
.deleteBtn{
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  background-color: cadetblue;
  font-size: 14px;
}
</style>
